require(['config'],()=>{
    require(['jquery','header','footer'],()=>{
       /* 获取商品分类列表接口 */
function loadSort() {
    $.ajax({
        method: 'get',
        url: 'http://api.yuguoxy.com/api/shop/category/list',
        success: function (data) {
          if (data.resultCode == 1) {
            let list = data.resultInfo.list
            showSort(list)
            onclickgetid()
          }
        },
      })

  }
  /* 获取商品分类列表接口 */
  function showSort(list) {
    let sortList = list.map(item => {
      return ` <a href="#"  data-id=${item.id}>${item.name}</a>`
    }).join('')
    const sortEle = document.querySelector('.sort')
    sortEle.innerHTML = sortList
    
    
  }
  /**
   * 点击商品分类超链接，跳转至相应页面
   */
  function onclickgetid(){
    $('.sort a').on('click',function(e){
      let target = e.target || e.srcElement
      let id = target.dataset.id - 0
      // console.log(id);
      // console.log($(this).index());
      // console.log(list);
      getId(id)
    })
  }

  function getId(id) {
    $.ajax({
        method: 'get',
        url: 'http://api.yuguoxy.com/api/shop/list/category',
        data: {
            categoryId: id,
        pageSize: 1000,
        pageNo: 1,
          },
        success: function (data) {
          if (data.resultCode == 1) {
            let list = data.resultInfo.list
            showProduct(list)
          }
        },
      })
  }
  
  function showProduct(list) {
    let str = list.map(item => {
      return `
      <a href="/html/detail.html?id=${item.id}" style="text-decoration:none; color:black;">
           <div class="product">
              <img src="${item.picture}" alt="${item.shop}">
              <!-- 商品详情 -->
              <div class="product-details">
                <p>${item.shop}</p>
                <p>
                  <span>淘宝</span>
                  <span>包邮</span>
                </p>
                <p>
                  <span>￥<span>${item.price}</span></span>
                  ${item.oldprice}人已买
                </p>
              </div>
           </div>
           </a>
             `
    }).join('')
    const productList = document.querySelector('.productList')
    productList.innerHTML = str
  }
  /* 搜索功能 */
  function getKeyword() {
    let href = location.href //获取地址
    let index = href.substring(href.indexOf('?') + 1) //找到字符对应的索引号
    let keyword = (index.split('='))[1]
    return keyword
  }
  /* 获取搜索接口 */
  function getPeoduct() {
    let keyword = getKeyword()
    keyword = decodeURIComponent(keyword)
     $.ajax({
      method: 'get',
      url: 'http://api.yuguoxy.com/api/shop/search',
      data: {
        keyword,
        },
      success: function (data) {
        if (data.resultCode == 1) {
          let list = data.resultInfo.list
          showProductList(list)
        }
      },
    })
  }
  
  function showProductList(list) {
    let str = list.map(item => {
      return `
      <a href="/html/detail.html?id=${item.id}" style="text-decoration:none; color:black;">
           <div class="product">
              <img src="${item.picture}" alt="${item.shop}">
              <!-- 商品详情 -->
              <div class="product-details">
                <p>${item.shop}</p>
                <p>
                  <span>淘宝</span>
                  <span>包邮</span>
                </p>
                <p>
                  <span>￥<span>${item.price}</span></span>
                  ${item.oldprice}人已买
                </p>
              </div>
           </div>
           </a>
             `
    }).join('')
    const productList = document.querySelector('.productList')
    productList.innerHTML = str
  }
  loadSort()
  getPeoduct()
    })
})